<template>
  <div>
    <div class="tree">
      <oolong-tree :tree-node="treeNode" v-on:passNode="acceptNode" ref="treeDom"></oolong-tree>
    </div>
    <div class="wordShow">
      <p>数据格式：{{rootNodeShow}}</p>
    </div>
  </div>
</template>
<script>
  import oolongTree from "../components/oolong-treeNew.vue"
  export default{
    data(){
      return {
        treeNode:{},
        treeNodeData: {
          name: "Root",
          pid: "0",
          id: "1",
          isCheck: false,
          menuChild: [
            {
              name: 'A',
              pid: '1',
              id: '11',
              isCheck: false,
              menuChild: [{name: 'A1', pid: '11', id: '111', isCheck: false, menuChild: []}, {
                name: 'A2',
                pid: '11',
                id: '112',
                isCheck: false,
                menuChild: []
              }]
            },
            {
              name: 'B',
              pid: '1',
              id: '12',
              isCheck: false,
              menuChild: [ {
                name: 'B2',
                pid: '12',
                id: '122',
                isCheck: false,
                menuChild: []
              }]
            },
            {
              name: 'C',
              pid: '1',
              id: '13',
              isCheck: false,
              menuChild: [
                {name: 'C1', pid: '13', id: '1311', isCheck: false, menuChild: []},
                {
                  name: 'C2',
                  pid: '13',
                  id: '13w122',
                  isCheck: false,
                  menuChild: []
                },{name: 'C3', pid: '13', id: '21311', isCheck: false, menuChild: []},
                {
                  name: 'C4',
                  pid: '13',
                  id: '13122',
                  isCheck: false,
                  menuChild: []
                }]
            },{
              name: 'D',
              pid: '1',
              id: 'www',
              isCheck: false,
              menuChild: [{name: 'D1', pid: 'www', id: 'wewew', isCheck: false, menuChild: []}]
            }
          ]
        },
        rootNodeShow: ""
      }

    },
    components: {
      oolongTree
    },
    mounted(){
      this.treeNode=this.$refs.treeDom.dealWithData(this.treeNodeData)
      this.jsonAnalysis();
    },
    methods: {
      acceptNode(node){
//          console.log(node);
      },
      jsonAnalysis(){
        this.rootNodeShow = JSON.stringify(this.treeNode);
      }
    }
  }

</script>
<style lang="scss" scoped>
  .wordShow {
    width: 100%;
    height: 200px;
    border: 1px solid #ccc;
    p{
      padding: 5px 10px
    }
  }

  .tree {
    background-color: #fff;
  }
</style>
